import React, {Component, Fragment} from 'react';

require('./css/frame.css');

export default class P7 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [-1,-1,-1,-1],
      t0:false,
    }
  }

  onClick(i) {
    let index= this.state.index;
    index[i]=1;
    this.setState({
      index
    })
  }

  onClickTip(){
    this.setState({
      t0:true
    })
  }
  onOver(e){
    this.setState({
      t0:true
    })
  }
  onOut(){
    this.setState({
      t0:false,
    })
  }

  render() {
    const {index,t0} = this.state;
    return (
      <div id="page">
        <div className="content" id="box7">
          <h4 className="title">地图更新</h4>

          <div className="bgimg" style={{top: '110px'}}>
            <img src={require("./img/7.jpg")}/>
          </div>
        </div>
        <p className="btns" style={{left:'150px',top:'95px'}} onClick={this.onClick.bind(this,0)}>更新方式</p>
        <p className="btns" style={{left:'340px',top:'115px'}} onClick={this.onClick.bind(this,1)}><br></br>车机连接</p>
        <p className="btns" style={{left:'520px',top:'95px'}} onClick={this.onClick.bind(this,2)}>地图下载</p>
        <p className="btns" style={{left:'720px',top:'115px'}} onClick={this.onClick.bind(this,3)}><br></br>地图安装</p>

        <div className="bdiv">
          {index[0] == 1 && <div className="fdiv" style={{left:'0px'}}>
            <img src={require("./img/70.png")}/>
            <p className='addword'>车机端</p>
            <p>三种方式进行更新：<br></br>
              在线<br></br>
              手机众智APP<br></br>
              USB
            </p>
          </div>}
          {index[1]== 1 && <div className="fdiv" style={{left:'200px'}}>
            <img src={require("./img/71.png")}/>
            <p className='addword'>车机端 </p>
            <p>建立手机与车机间连接；
              并查看车机地图版本号。
            </p>
          </div>}
          {index[2]== 1 && <div className="fdiv" style={{left:'400px'}}>
            <img src={require("./img/72.jpg")}/>
            <p className='addword'>手机端</p>
            <p>选择“地图更新“进入地图下载界面，手机地图版本号高于车机地图版本号时，点击下载城市地图安装包。
            </p>
          </div>}
          {index[3]== 1 && <div className="fdiv" style={{left:'600px'}}>
            <img src={require("./img/73.png")}/>
            <p className='addword'>车机端</p>
            <p>下载完成后进入导航设置，选取地图更新中“手机”，
              即可查看APP传入的地图安装包，点击安装即可完成地图升级
            </p>
          </div>}
        </div>

        <img
          src={require("./img/info.png")}
          className="circle"
          style={{left:'37px',bottom:"30px"}}
          onClick={this.onClickTip.bind(this)}
          onMouseOver={this.onOver.bind(this)}
          onMouseOut={this.onOut.bind(this)}
          id='g1'
        />

        {t0 && <div className="tips" style={{left: '5px', top: "348px"}} id="tip0">
          <span className="bot" style={{left: '30px'}}></span>
          <div className="tipcont" id="words">传输数据时尽量保持APP在前台，若放在后台或锁屏状态，可能会导致连接断开！</div>
        </div>}

      </div>
    );
  }
}


